<template>
  <div class="servegroup">
    <ConTitle :info="info"></ConTitle>
    <el-form ref="form" :model="query" :inline="true" label-width="100px">
      <el-form-item label="群组名称:">
        <el-input v-model.trim="query.keyword" class="input-width"></el-input>
      </el-form-item>
    </el-form>

    <el-table :data="spentList" stripe style="width: 100%">
      <el-table-column prop="id" label="充值id" width="250"> </el-table-column>
      <el-table-column prop="cTime" label="日期"> </el-table-column>
      <el-table-column prop="amount" label="充值金额"> </el-table-column>
      <el-table-column prop="cTime" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.cTime | cTimeType }}
        </template></el-table-column
      >
      <el-table-column prop="desc" label="备注"> </el-table-column>
    </el-table>
    <div class="servegroup-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import moment from "moment";
import { $spentList } from "@/api";
export default {
  name: "SpentView",
  data() {
    return {
      info: {
        path: "计费/",
        text: "充值记录",
        msg: "展示当前账户得消息额度得所有充值记录。",
      },
      spentList: [],
      total: 0, //总数量的默认值
      query: {
        currPage: 1, //当前页码
        pageSize: 5, //每页显示的条目
      },
      dialogVisible: false,
    };
  },
  mounted() {
    // 调用第一页数据
    this.getListData(this.query);
  },
  filters: {
    cTimeType(value) {
      return moment(value).format("LL");
    },
  },
  methods: {
    async getListData() {
      var res = await $spentList(this.query);
      console.log(res);
      this.spentList = res.data.data;
      this.total = res.data.total;
    },
    handleSizeChange(num) {
      console.log(num);
      this.query.pageSize = num;
      this.query.currPage = 1;
      this.getListData();
    },
    handleCurrentChange(curr) {
      console.log(curr);
      this.query.currPage = curr;
      this.getListData();
    },
  },
  components: {
    ConTitle,
  },
};
</script>


<style lang="scss" scoped>
.gateway {
  padding: 10px;
}
.search-end {
  font-size: 12px;
  margin-left: 40px;
  color: #858793;
}
.el-input {
  width: 220px;
}
.el-form {
  display: flex;
  margin-top: 20px;
}
.addbtn {
  width: 100px;
  height: 35px;
}
</style>